<template>
  <div class="table-box">
    <ProTable
      ref="proTable"
      title="角色列表"
      row-key="path"
      :indent="30"
      :request-api="getTableList"
      :columns="columns"
      :pagination="true"
    >
      <!-- 菜单操作 -->
      <template #operation>
        <el-button type="primary" link :icon="View"> 查看 </el-button>
        <el-button type="primary" link :icon="EditPen"> 编辑 </el-button>
        <el-button type="primary" link :icon="Delete"> 删除 </el-button>
      </template>
    </ProTable>
  </div>
</template>

<script setup lang="tsx" name="menuMange">
import { ref, reactive } from "vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { Delete, EditPen, View } from "@element-plus/icons-vue";
import ProTable from "@/components/ProTable/index.vue";
import { page, SysFile } from "@/api/system/file";

const proTable = ref();

const getTableList = (params: any) => {
  return page(params);
};

// 表格配置项
const columns = reactive<ColumnProps<SysFile.ResSysFile>[]>([
  { prop: "fileName", label: "文件名称" },
  { prop: "fileType", label: "文件类型" },
  { prop: "fileSize", label: "文件大小" },
  {
    prop: "filePath",
    label: "文件路径",
    render: scope => {
      return (
        <>
          <img src={scope.row.filePath} class="upload-image" />
        </>
      );
    }
  }
]);
</script>
<style scope>
.upload-image {
  width: 30%;
  height: 30%;
  object-fit: contain;
}
</style>
